<template>
  <el-tabs v-if="tabs.length > 0" class="dw-warpper" v-model="activeName" closable @tab-remove="tabRemove">
    <el-tab-pane v-for="(item, index) in tabs" :label="item.fileName" :name="item.id">
      <template #label>
        <div class="title">{{ item.fileName }}</div>
      </template>
      <template-file-form ref="templateFileFormRef" :id="item.id"></template-file-form>
    </el-tab-pane>
  </el-tabs>
  <div v-else class="dw-warpper">
    <el-empty description="当前没有任何打开的文件" />
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import type { ITemplateFileTab } from '../template-set';
import templateFileForm from './template-file-form.vue';
const activeName = ref<string>('');
defineOptions({
  name: 'TemplateFileTabs',
});
const templateFileFormRef = ref();
const tabs = ref<ITemplateFileTab[]>([]);
const openFile = (templateFileTab: ITemplateFileTab) => {
  const existTabs = tabs.value.filter((item) => {
    return templateFileTab.id === item.id;
  });
  if (existTabs.length === 0) {
    tabs.value.push(templateFileTab);
  }
  activeName.value = templateFileTab.id;
};
const tabRemove = (id: string) => {
  const list = tabs.value.filter((item) => {
    return id !== item.id;
  });
  tabs.value = list;
};
const save = () => {
  templateFileFormRef.value[0].save();
};
defineExpose({ openFile, save });
</script>
<style lang="scss" scoped>
.dw-warpper {
  width: 100%;
  height: 100%;
  .title {
    padding: 0 10px;
  }
}
</style>
